<template>
  <div class="testPaperDetail">
    <div class="container">
      <div class="testpaperTop">
        <div class="testpaperTopLeft">
          <h1>{{ paperTestDetail.paperTitle }}</h1>
        </div>
        <div class="testpaperTopRight">
          <el-button
            plain
            class="backBtn"
            @click="backBtn"
          >返回</el-button>
          <el-button
            plain
            class="editTestPaper"
            @click="editTestPaper"
          >编辑试卷</el-button>
        </div>

      </div>
      <div class="testPaperDetails">
        <div class="operate">
        </div>
        <div class="questionTable">
          <div class="singleChoice">
            <span>第一部分：单选</span>
            <span> （共{{ singleQuestionData?.length }}道） </span>
            <span>总分值：{{ singleQuestionTotalScore }} 分</span>
          </div>
          <div class="tableDetail">
            <el-table
              :data="singleQuestionData"
              @select="selectQuestion"
              style="width: 100%;"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80"
              />
              <el-table-column
                prop="topic"
                label="题目"
                width="244"
              />
              <el-table-column
                prop="optionA"
                label="选项A"
              />
              <el-table-column
                prop="optionB"
                label="选项B"
              />
              <el-table-column
                prop="optionC"
                label="选项C"
              />
              <el-table-column
                prop="optionD"
                label="选项D"
              />
              <el-table-column
                prop="rightAnswers"
                label="答案"
              />
            </el-table>
          </div>
        </div>

        <div class="questionTable">
          <div class="singleChoice">
            <span>第二部分：多选</span>
            <span> （共{{ multipleQuestionData?.length }}道） </span>
            <span>总分值：{{ multipleQuestionTotalScore }}
              分</span>
          </div>
          <div class="tableDetail">
            <el-table
              :data="multipleQuestionData"
              @select="selectQuestion"
              style="width: 100%;"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80"
              />
              <el-table-column
                prop="topic"
                label="题目"
                width="244"
              />
              <el-table-column
                prop="optionA"
                label="选项A"
              />
              <el-table-column
                prop="optionB"
                label="选项B"
              />
              <el-table-column
                prop="optionC"
                label="选项C"
              />
              <el-table-column
                prop="optionD"
                label="选项D"
              />
              <el-table-column
                prop="optionE"
                label="选项E"
              />
              <el-table-column
                prop="optionF"
                label="选项F"
              />
              <el-table-column
                prop="rightAnswersMore"
                label="答案"
              />
            </el-table>
          </div>
        </div>

        <div class="questionTable">
          <div class="singleChoice">
            <span>第三部分：判断</span>
            <span> （共{{ judgeQuestionData?.length }}道） </span>
            <span>总分值：{{ judgeQuestionTotalScore }} 分</span>
          </div>
          <div class="tableDetail">
            <el-table
              :data="judgeQuestionData"
              @select="selectQuestion"
              style="width: 100%;"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80"
              />
              <el-table-column
                prop="topic"
                label="题目"
                width="244"
              />
              <el-table-column
                prop="optionA"
                label="选项A"
              />
              <el-table-column
                prop="optionB"
                label="选项B"
              />
              <el-table-column
                prop="rightAnswers"
                label="答案"
              />
            </el-table>
          </div>
        </div>
        <div class="questionTable">
          <div class="singleChoice">
            <span>第四部分：填空</span>
            <span> （共{{ fillQuestionData?.length }}道） </span>
            <span>总分值：{{ fillQuestionTotalScore }} 分</span>
          </div>
          <div class="tableDetail">
            <el-table
              :data="fillQuestionData"
              @select="selectQuestion"
              style="width: 100%;"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80"
              />
              <el-table-column
                prop="topic"
                label="题目"
                width="244"
              />

              <el-table-column
                prop="rightAnswers"
                label="答案"
              />
            </el-table>
          </div>
        </div>
        <div class="questionTable">
          <div class="singleChoice">
            <span>第五部分：论述</span>
            <span> （共{{ essayQuestionData?.length }}道） </span>
            <span>总分值：{{ essayQuestionTotalScore }} 分</span>
          </div>
          <div class="tableDetail">
            <el-table
              :data="essayQuestionData"
              @select="selectQuestion"
              style="width: 100%;"
            >
              <el-table-column
                prop="id"
                label="ID"
                width="80"
              />
              <el-table-column
                prop="topic"
                label="题目"
                width="244"
              />

              <el-table-column
                prop="rightAnswers"
                label="答案"
              />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
// 引入获取获取试卷详情 的接口
import { getTestPaperDetail } from '@/api/assessment/testpapermanage.js'
const route = useRoute()
const router = useRouter()

const paperId = computed(() => route.query.paperId)



function backBtn () {
  router.go(-1)
}

function editTestPaper () {
  router.push({
    path: 'addtestpaper',
    query: {
      paperId: paperId.value,
      isGetData: 1
    }
  })
}

// 试卷题目完整信息
const paperTestDetail = ref({})

// 单选题数据
const singleQuestionData = ref([{}])


// 多选题数据
const multipleQuestionData = ref([{}])

// 判断题数据
const judgeQuestionData = ref([{}])

// 填空题数据
const fillQuestionData = ref([{}])

// 论述题数据
const essayQuestionData = ref([{}])
// 获取试卷详情
const getTestPaperDetailData = async () => {
  const res = await getTestPaperDetail(paperId.value)
  paperTestDetail.value = res.data
  singleQuestionData.value = res.data.topics.filter(item => {
    return item.topicType == 0
  })
  multipleQuestionData.value = res.data.topics.filter(item => {
    return item.topicType == 1
  })
  judgeQuestionData.value = res.data.topics.filter(item => {
    return item.topicType == 2
  })
  fillQuestionData.value = res.data.topics.filter(item => {
    return item.topicType == 3
  })
  essayQuestionData.value = res.data.topics.filter(item => {
    return item.topicType == 4
  })
}
getTestPaperDetailData()

// 单选题总分
const singleQuestionTotalScore = computed(() => {
  return Number(singleQuestionData.value.length) * Number(paperTestDetail.value.singleChoiceValue)
})

// 多选题总分
const multipleQuestionTotalScore = computed(() => {
  return Number(multipleQuestionData.value.length) * Number(paperTestDetail.value.multipleChoiceValue)
})

// 判断题总分
const judgeQuestionTotalScore = computed(() => {
  return Number(judgeQuestionData.value.length) * Number(paperTestDetail.value.judgeChoiceValue)
})

// 填空题总分
const fillQuestionTotalScore = computed(() => {
  return Number(fillQuestionData.value.length) * Number(paperTestDetail.value.fillChoiceValue)
})

// 论述题总分
const essayQuestionTotalScore = computed(() => {
  return Number(essayQuestionData.value.length) * Number(paperTestDetail.value.discussChoiceValue)
})


</script>

<style lang='scss' scoped>
.testPaperDetail {
  padding: 32px;
  background: #f5f6f9;
  .container {
    min-height: 936px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    .testpaperTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88px;
      padding: 0 32px 0 40px;
      border-bottom: 1px solid #d4d4d4;
      .testpaperTopLeft {
        h1 {
          font-size: 22px;
          color: #343957;
        }
      }
      .testpaperTopRight {
        .backBtn {
          width: 80px;
          height: 40px;

          border-radius: 6px 6px 6px 6px;
          border: 1px solid #5974ff;
          font-size: 16px;
          color: #5974ff;
          margin-right: 24px;
        }

        .editTestPaper {
          width: 112px;
          height: 40px;
          background: #5974ff;
          border-radius: 6px 6px 6px 6px;
          font-size: 16px;
          color: #ffffff;
        }
      }
    }
    .testPaperDetails {
      padding: 24px 32px 0 32px;
      .operate {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .plagiarismCheck {
          width: 112px;
          height: 40px;
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #5974ff;
          font-size: 16px;
          color: #5974ff;
        }
      }
      .searchBox {
        display: flex;
        width: 280px;
        height: 40px;
        background: #f5f5f5;
        border-radius: 6px;

        ::v-deep(.el-input__wrapper) {
          height: 40px;
          background-color: #f5f5f5 !important;
          box-shadow: 0;
          &:hover {
            box-shadow: 0;
            border: none;
          }
        }
        ::v-deep(.el-input__wrapper.is-focus) {
          box-shadow: none !important;
        }

        .searchIcon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: #fff;
          background: #5974ff;
          border-radius: 0px 6px 6px 0px;
          cursor: pointer;
        }
      }

      .questionTable {
        margin-top: 14px;
        .singleChoice {
          span:nth-child(1) {
            font-size: 18px;
            color: #343957;
          }
          span:nth-child(2) {
            font-size: 14px;
            color: #343957;
          }
          span:nth-child(3) {
            font-size: 16px;
            color: #343957;
          }
        }
        .tableDetail {
          margin-top: 24px;
        }
        ::v-deep(.el-table__header) {
          height: 56px;
        }
        ::v-deep(.el-table__row) {
          height: 56px;
        }
      }
    }
  }
}
</style>
